<template>
  <div class="main">
    <div class="container">
      <div class="body_">
        <h4 class="title_">收货地址</h4>
        <div class="adress">
          <div
            :class="{ item: true, active: index === activeId }"
            v-for="(item, index) in this.addressList"
            :key="index"
            @click="activeId = index"
          >
            <span class="name">{{ item.name }}</span>
            <span class="phone">{{ item.phone }}</span>
            <span class="adress">{{ item.area_name }}</span>
            <span class="home">{{ item.desc }}</span>
            <div class="button">
              <span class="update" @click="update(item, index)"
                ><a-icon type="form"
              /></span>
              <span class="update" @click="deleted(item.id)"
                ><a-icon type="delete"
              /></span>
            </div>
          </div>
          <div class="add">
            <div @click="isShow = !isShow">
              <i class="iconfont icon-plus"></i>
              <a-icon type="plus-circle" />
              <br />
              <span>添加新地址</span>
            </div>
          </div>
        </div>
        <h4 class="title_">商品</h4>
        <div class="goods">
          <div
            class="goods_items"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="_box">
              <div class="img_box">
                <img v-lazy="item.picurl" />
              </div>
              <span class="name">{{ item.name }}</span>
            </div>
            <span class="name">{{ item.price }} 元 x {{ item.number }}</span>
            <span class="price">{{ item.price * item.number }}元</span>
          </div>
        </div>
        <div class="ways">
          <h4 class="title_">配送方式</h4>
          <span class="text">包邮</span>
        </div>
        <div class="order_info">
          <div class="information">
            <p>
              <span>商品件数:</span>
              <span class="unit">{{ count }}</span>
            </p>
            <p>
              <span>商品总价:</span>
              <span class="unit">{{ total }}元</span>
            </p>
            <p>
              <span>活动优惠:</span>
              <span class="unit">-0元</span>
            </p>
            <p>
              <span>活动券抵扣:</span>
              <span class="unit">-0元</span>
            </p>
            <p>
              <span>运费:</span>
              <span class="unit">-0元</span>
            </p>
            <p>
              <span>应付总额:</span>
              <span class="unit price">{{ total }}元</span>
            </p>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="check_address"></div>
        <div class="btn">
          <button class="goCart" @click="gocart">返回购物车</button>
          <button class="buy" @click="topay">立即下单</button>
        </div>
      </div>
    </div>
    <!-- 弹框S -->
    <div
      :class="{ message_box: true, show: isShow }"
      @click.prevent="closeModal"
    >
      <div @click.stop.prevent :class="{ _box: true, transition: isShow }">
        <h4 class="title_ p-l-10 text-left">添加收货地址</h4>
        <div class="form_">
          <input class="text" v-model="name" type="text" placeholder="姓名" />
          <input
            class="text"
            v-model="phone"
            type="text"
            placeholder="手机号"
          />

          <!-- 地址下拉框S -->
          <div class="select">
            <a-cascader
              :options="options"
              @change="onChange"
              v-model="areacode"
              search
            />
            <!-- 地址下拉框E -->
          </div>
          <div class="info">
            <input class="info_" v-model="address" placeholder="详细地址" />
          </div>
        </div>
        <div>
          <button @click="openAddressModal(true)" class="confirm">确认</button>
          <button @click="closeModal" class="close_">取消</button>
        </div>
      </div>
      <a-alert
        message="Warning"
        description="请输入完整的信息."
        type="warning"
        show-icon
        v-if="isAlert"
      />
      <!-- 弹框E -->
    </div>
  </div>
</template>
<script>
import { Allcity,Updateaddress, address, deleteddress, Getaddress} from "@/api/ads";
import {addorder} from "@/api/order";

export default {
  data() {
    return {
      options: [],
      activeId: 0,
      isShow: false,
      orderList: JSON.parse(localStorage.getItem("orderList")),
      name: "",
      phone: "",
      finalProvince: "",
      finalCity: "",
      finalArea: "",
      address: "",
      area: "",
      areaname: "",
      addressList: this.$store.state.XaddressList,
      areaList: [],
      isAlert: false,
      areacode: [],
      updateKey: "",
      Index: "",
      goodsList: JSON.parse(localStorage.getItem("goodsList")),
    };
  },
  methods: {
    openAddressModal(falg) {
      if (falg) {
        if (this.updateKey !== "") {
          if (this.name && this.phone && this.areaname && this.address) {
            this.addressList[this.Index].name = this.name;
            this.addressList[this.Index].phone = this.phone;
            this.addressList[this.Index].area_name = this.areaname;
            this.addressList[this.Index].desc = this.address;
            Updateaddress(
              this.name,
              this.phone,
              this.areacode.flat().toString(),
              this.address,
              this.updateKey
            ).then((res) => {
              console.log(res);
            });
            this.name = this.phone = this.areaname = this.address = "";
            this.areacode = [];
          }
        } else if (
          this.name &&
          this.phone &&
          this.finalProvince &&
          this.finalcity &&
          this.finalArea &&
          this.address
        ) {
          address(
            this.name,
            this.phone,
            this.areacode.flat().toString(),
            this.areaname,
            this.address
          ).then((res) => {
            this.addressList = res.data;
          });
        } else {
          this.isAlert = true;
        }
      }
      this.isShow = false;
    },
    closeModal() {
      this.isShow = false;
    },
    // 去订单页
    topay() {
      // 点击后购物车列表去重
      for (var i in this.goodsList) {
        for (var k in this.orderList) {
          if (this.goodsList[i].id == this.orderList[k].id) {
            this.goodsList.splice(i, 1);
          }
        }
      }
      this.$store.commit("xtotal", this.total);
      this.$store.commit("xaddressList", this.addressList[this.activeId]);
      sessionStorage.setItem("addressList", JSON.stringify(this.addressList[this.activeId]));
      localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      // localStorage.removeItem("orderList")
      console.log(this.addressList[this.activeId].id);
      addorder(this.orderList,this.addressList[this.activeId].id)
      this.$router.push("/pay");
    },
    onChange(other) {
      // 多维数组变成一维数组再转换为字符串
      this.areacode = other;
      console.log(this.areacode);
      this.area = other.flat().toString();
      let province = [];
      province = this.options.filter((item) => {
        return item.value == other[0];
      });
      this.finalProvince = province[0].cityname;
      let city = [];
      city = province[0].children.filter((item) => {
        return item.value == other[1];
      });
      this.finalcity = city[0].cityname;
      let area = [];
      area = city[0].children.filter((item) => {
        return item.value == other[2];
      });
      this.finalArea = area[0].cityname;
      // 省市区字符串拼接，用于请求数据
      this.areaname = this.finalProvince + this.finalcity + this.finalArea;
    },
    // 修改地址
    update(item, index) {
      this.name = item.name;
      this.phone = item.phone;
      this.address = item.desc;
      this.areaname = item.area_name;
      this.updateKey = item.id;
      let arr = item.area.split(",");
      // 返回来的数组里面是字符串，需要转为数字类型
      this.areacode = arr.map(Number);
      this.Index = index;
      this.isShow = !this.isShow;
    },
    deleted(nowId) {
      deleteddress(nowId).then((res) => {
        this.addressList = this.addressList.filter((item) => {
          console.log(res);
          return item.id != nowId;
        });
      });
    },
    gocart() {
      this.$router.push("/cart");
    },
  },
  computed: {
    // 总个数
    count() {
      return this.orderList.reduce((sum, item) => {
        return sum + Number(item.number);
      }, 0);
    },
    total() {
      return this.orderList.reduce((sum, item) => {
        return sum + item.price * item.number;
      }, 0);
    },
  },
  created: function () {
    Allcity()
      .then((res) => {
        this.options = res.data.result;
      })
      .then(() => {
        Getaddress().then((res) => {
          this.addressList = res.data.result;
        });
      });
  },
};
</script>

<style lang="scss" scoped>
.main {
  min-width: 1200px;
  background: $color;
}
.contain {
  background: white;
  border-bottom: 2px solid $color;
}
.title {
  flex-grow: 1;
  font-size: 28px;
  & > h3 {
    margin-left: 30px;
    font-weight: 200;
  }
}
.title_ {
  font-size: 25px;
  font-weight: 200;
}
.ways {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
  & .text {
    margin-left: 50px;
    color: $color;
    font-size: 14px;
  }
}
.container {
  background: #f5f5f5;
  padding: 50px 0;
  & > .body_ {
    width: 1200px;
    background: white;
    height: 100%;
    margin: auto;
    padding: 30px 20px;
    padding-bottom: 0;
    & > .adress {
      margin: 20px 0;
      display: flex;
      flex-wrap: wrap;
      & > .item {
        width: 270px;
        height: 180px;
        border: 1px solid #ccc;
        padding: 15px 20px;
        display: flex;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 15px;
        position: relative;
        & > .name {
          font-size: 18px;
          margin-bottom: 10px;
          color: black;
        }
        & > span {
          margin-top: 3px;
          color: #666;
          font-size: 14px;
        }
        & > .home {
          word-break: break-all;
        }
        .button {
          width: 228px;
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 0px;
          span {
            font-size: 20px;
          }
        }
      }
      & > .add {
        width: 270px;
        height: 180px;
        border: 1px dashed black;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #ccc;
        cursor: pointer;
        &:hover {
          color: #666;
        }
        & .anticon {
          font-size: 30px;
          margin-bottom: 5px;
        }
      }
    }
    & > .goods {
      padding: 30px 0;
      border-bottom: 1px solid #ccc;
      & > .goods_items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        & ._box {
          display: flex;
          align-items: center;
          width: 50%;
        }
        & .img_box {
          width: 120px;
          text-align: center;
        }
        & img {
          height: 80px;
        }
        & .name {
          font-size: 17px;
          font-weight: 200;
          margin-left: 10px;
          color: rgb(78, 77, 77);
        }
        & > .price {
          color: $color;
          font-size: 17px;
          font-weight: 200;
          margin-right: 60px;
        }
      }
    }
  }
}
.active {
  border: 1px solid $color !important;
  cursor: pointer;
}
.order_info {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  & .information {
    width: 250px;
    padding: 20px 0px;
    font-size: 18px;
    margin-right: 60px;
    font-weight: 200;
    & > p {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.unit {
  color: $color;
}
.footer {
  width: 1200px;
  border-top: 1px solid #ccc;
  margin: auto;
  background: white;
  &::after {
    content: "";
    clear: both;
    display: block;
  }
}
.btn {
  padding: 20px 30px;
  float: right;
  margin-right: 45px;
  & > button {
    padding: 10px 60px;
    border: 0;
    outline: none;
    font-size: 16px;
    cursor: pointer;
  }
}
.buy {
  padding: 10px 20px;
  background: $color;
  color: white;
  margin-left: 20px;
}
.transition {
  transform: translate(-50%, -50%) !important;
}
.show {
  height: 100% !important;
}
.message_box {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  background: rgba(#000000, 0.4);
  left: 0;
  top: 0;
  & > ._box {
    &::before {
      display: block;
      content: "";
      margin-top: 20px;
    }
    position: absolute;
    width: 700px;
    background: #f5f5f5;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transition: all 0.5s;
    transform: translate(-50%, -60%);
    text-align: center;
    & > .form_ {
      display: flex;
      padding: 10px;
      background: white;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 12px;
      & .text {
        width: 48%;
        padding: 4px;
        border: 1px solid #ccc;
        outline: none;
        &:focus {
          border: 1px solid #40a9ff;
        }
      }
      & .select {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        & .select_ {
          width: 32%;
        }
      }
      & .info {
        width: 100%;
        margin-top: 10px;
        font-size: 12px;
        & .info_ {
          width: 100%;
          height: 80px;
          font-size: 12px;
          outline: none;
          border: 1px solid #ccc;
          padding: 5px 10px;
          &:focus {
            border: 1px solid #40a9ff;
          }
        }
        & > .height {
          height: 30px;
          font-weight: 200;
        }
      }
    }
    & > p {
      padding: 50px 0;
      font-size: 25px;
      font-weight: 200;
    }
    & > div {
      background: #f5f5f5;
      padding: 20px 30px;
      & > .confirm {
        width: 200px;
        padding: 15px 0;
        color: white;
        outline: none;
        background: $color;
        opacity: 0.8;
        border: 0;
        margin-right: 10px;
        &:hover {
          opacity: 1;
        }
      }
      & > .close_ {
        border: 0;
        width: 200px;
        outline: none;
        color: white;
        padding: 15px 0;
        background: #666;
        opacity: 0.8;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
}
// .select {
//   text-indent: 10px;
// }
</style>